<template>
  <div>
    <h3>用户管理</h3>
    <!-- <ul>
      <li v-for="(item,index) in listData" :key="index">{{item}}</li>
    </ul>-->
    <el-table :data="userList" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="createTime" label="注册时间">
        <template slot-scope="scope">
          <p>{{scope.row.createTime | times}}</p>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page.sync="currpage"
      :page-size="pageSize"
      prev-text="上一页"
      next-text="下一页"
      background
      layout="prev, pager, next, jumper"
      :total="100"
    ></el-pagination>
  </div>
</template>

<script>
import { userList, userPagination } from "@/request/http";
export default {
  name: "UserList",
  data() {
    return {
      // listData:[],
      userList: [],
      pageSize: 10, //每一页几条数据
      currpage: 1, //当前在第几页
      total: "" //总页数
    };
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    getData() {
      //保留使用接口获取数据
      userPagination({ pageNum: this.currpage }).then(res => {
        // console.log(res.data.data.list);
        this.userList = res.data.data.list;
      });

      // this.userList = res.data.data.list
      this.getList();
    },
    getList() {
      //包头不包尾
      this.listData = this.userList.slice(
        (this.currpage - 1) * this.pageSize,
        this.currpage * this.pageSize
      );
    },
    async Beforemethods() {
      //写异步
      const res = await userList({
        pageNum: 1
      });
      console.log(res);
      // this.userList = res.data.data.list;
      this.total = res.data.data.total;
    },
  },
  watch: {
    currpage(newpage, oldpage) {
      this.getData();
    }
  },
  mounted() {
    this.Beforemethods();
  }
};
</script>

<style>
</style>